<template>
  <div class="mid-b">
    <div class="item" :style="style">
      <div
        style="
          text-align: center;
          color: white;
          font-size: 10px;
          -webkit-font-smoothing: antialiased;
        "
      >
        梳 齿 工 作 站 状 态
      </div>
      <div class="item-content">
        <div class="item-one">
          <div>
            <el-progress
              type="dashboard"
              :stroke-width="stroke"
              :percentage="percent1"
              color="#04FED3"
              define-back-color="#095A7E"
              :format="(e) => format(e, 1)"
            ></el-progress>
          </div>

          <div style="color: white; font-size: 8px; margin-top: -7px">
            线缆试验室
          </div>
        </div>
        <div class="item-one">
          <div>
            <el-progress
              type="dashboard"
              :stroke-width="stroke"
              :percentage="percent2"
              color="#24CAFF"
              :format="(e) => format(e, 2)"
              define-back-color="#095A7E"
            ></el-progress>
          </div>

          <div style="color: white; font-size: 8px; margin-top: -7px">
            材质分析试验室
          </div>
        </div>
        <div class="item-one">
          <div>
            <el-progress
              type="dashboard"
              :stroke-width="stroke"
              :percentage="percent3"
              color="#FA6603"
              :format="(e) => format(e, 3)"
              define-back-color="#095A7E"
            ></el-progress>
          </div>

          <div style="color: white; font-size: 8px; margin-top: -7px">
            电缆保护管试验室
          </div>
        </div>
        <div class="item-one">
          <div>
            <el-progress
              type="dashboard"
              :stroke-width="stroke"
              :percentage="percent4"
              color="#34D7EA"
              :format="(e) => format(e, 4)"
              define-back-color="#095A7E"
            ></el-progress>
          </div>

          <div style="color: white; font-size: 8px; margin-top: -7px">
            结构力学试验室
          </div>
        </div>
      </div>
    </div>
    <div class="item2" :style="style">
      <div
        style="
          text-align: center;
          color: white;
          font-size: 10px;
          -webkit-font-smoothing: antialiased;
        "
      >
        库 容 实 时 监 控
      </div>
      <div class="item2-content">
        <div id="boxs1" class="box1"></div>
        <div id="boxs2" class="box2"></div>
        <div id="boxs3" class="box3"></div>
        <div class="box4">
          <div>样品</div>
          <div>料箱</div>
          <div>空位</div>
        </div>
      </div>
    </div>
    <div class="item3" :style="style">
      <div
        style="
          text-align: center;
          color: white;
          font-size: 10px;
          -webkit-font-smoothing: antialiased;
        "
      >
        静 置 区 实 时 温 湿 度
      </div>
      <transition name="el-zoom-in-center">
        <div class="item3-content" v-show="show">
          <div class="ball1" :style="style2">
            <div>
              <div
                style="
                  color: white;
                  font-size: 12px;
                  color: #f5d877;
                  font-weight: bold;
                  text-align: center;
                "
              >
                {{ humidity }}
              </div>
              <div style="color: white; font-size: 10px; text-align: center">
                湿 度({{ side }})
              </div>
            </div>
          </div>
          <div class="ball2" :style="style3">
            <div>
              <div
                style="
                  color: white;
                  font-size: 12px;
                  color: #f5d877;
                  font-weight: bold;
                  text-align: center;
                "
              >
                {{ temperature }}°C
              </div>
              <div style="color: white; font-size: 10px; text-align: center">
                温 度({{ side }})
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>


<script>
import * as echarts from "echarts";
import {
  getStatisticAnalysis,
  outputTemperature,
  outputTemperature2,
  getInventory,
} from "@/common/api";

export default {
  name: "MidBottom",
  props: {},
  components: {},
  computed: {
    style() {
      return {
        backgroundImage: `url(${this.bgStyle})`,
        backgroundRepeat: "no-repeat", // 确保背景图片不重复
        backgroundSize: "100% 100%",
      };
    },
    style2() {
      return {
        backgroundImage: `url(${this.bgStyle2})`,
        backgroundRepeat: "no-repeat", // 确保背景图片不重复
        backgroundSize: "100% 100%",
      };
    },
    style3() {
      return {
        backgroundImage: `url(${this.bgStyle3})`,
        backgroundRepeat: "no-repeat", // 确保背景图片不重复
        backgroundSize: "100% 100%",
      };
    },
    side() {
      if (this.show2) {
        return "1F";
      } else {
        return "2F";
      }
    },
    temperature() {
      if (this.show2) {
        return this.temperature1;
      } else {
        return this.temperature2;
      }
    },
    humidity() {
      if (this.show2) {
        return this.humidity1;
      } else {
        return this.humidity2;
      }
    },
  },
  data() {
    return {
      bgStyle: require("@/assets/three.png"),
      bgStyle2: require("@/assets/ball.png"),
      bgStyle3: require("@/assets/ball2.png"),
      chartInstance: null,
      chartInstance2: null,
      chartInstance3: null,
      count1: "",
      count2: "",
      count3: "",
      count4: "",
      percent1: 0,
      percent2: 0,
      percent3: 0,
      percent4: 0,
      // temperature: "",
      // humidity: "",
      temperature1: "",
      humidity1: "",
      temperature2: "",
      humidity2: "",
      show: true,
      show2: true, //true-1F false-2F
      stroke: 18,
    };
  },
  methods: {
    getCharts1(m2R2Data) {
      // let m2R2Data2 = [
      //   {
      //     value: 335,
      //     name: "样品",
      //     itemStyle: {
      //       color: "#9CC900",
      //     },
      //   },
      //   {
      //     value: 310,
      //     name: "料箱",
      //     itemStyle: {
      //       color: "#06CBFF",
      //     },
      //   },
      //   {
      //     value: 234,
      //     name: "空位",
      //     itemStyle: {
      //       color: "#0688F7",
      //     },
      //   },
      // ];

      let option = {
        title: [
          {
            text: "{line1|高 货}\n{line2|架 区}", // 使用 rich 标签进行换行和样式控制
            textStyle: {
              rich: {
                line1: {
                  fontSize: 9,
                  color: "white",
                  lineHeight: 14, // 调整这个值来增加或减少行间距
                },
                line2: {
                  fontSize: 9,
                  color: "white",
                  lineHeight: 14, // 调整这个值来增加或减少行间距
                },
              },
            },
            left: "44%",
            top: "36%", // 可能需要根据实际情况调整以确保视觉上的居中
            textAlign: "center", // 确保文字水平居中对齐
          },
        ],

        series: [
          {
            name: "",
            type: "pie",
            center: ["48%", "50%"],
            radius: ["50%", "75%"],
            clockwise: false, //饼图的扇区是否是顺时针排布
            avoidLabelOverlap: false,
            itemStyle: {
              //图形样式
              normal: {
                borderColor: "#ffffff",
                borderWidth: 1,
              },
            },
            label: {
              normal: {
                show: false,
                position: "outter",
                formatter: function (parms) {
                  return parms.data.name;
                },
              },
            },
            data: m2R2Data,
          },
        ],
      };
      this.chartInstance.setOption(option);
    },
    getCharts2(m2R2Data) {
      // let m2R2Data2 = [
      //   {
      //     value: 335,
      //     name: "样品",
      //     itemStyle: {
      //       color: "#9CC900",
      //     },
      //   },
      //   {
      //     value: 310,
      //     name: "料箱",
      //     itemStyle: {
      //       color: "#06CBFF",
      //     },
      //   },
      //   {
      //     value: 234,
      //     name: "空位",
      //     itemStyle: {
      //       color: "#0688F7",
      //     },
      //   },
      // ];

      let option = {
        title: [
          {
            text: "{line1|矮 货}\n{line2|架 区}", // 使用 rich 标签进行换行和样式控制
            textStyle: {
              rich: {
                line1: {
                  fontSize: 9,
                  color: "white",
                  lineHeight: 14, // 调整这个值来增加或减少行间距
                },
                line2: {
                  fontSize: 9,
                  color: "white",
                  lineHeight: 14, // 调整这个值来增加或减少行间距
                },
              },
            },
            left: "43%",
            top: "36%", // 可能需要根据实际情况调整以确保视觉上的居中
            textAlign: "center", // 确保文字水平居中对齐
          },
        ],

        series: [
          {
            name: "",
            type: "pie",
            center: ["48%", "50%"],
            radius: ["50%", "75%"],
            clockwise: false, //饼图的扇区是否是顺时针排布
            avoidLabelOverlap: false,
            itemStyle: {
              //图形样式
              normal: {
                borderColor: "#ffffff",
                borderWidth: 1,
              },
            },
            label: {
              normal: {
                show: false,
                position: "outter",
                formatter: function (parms) {
                  return parms.data.name;
                },
              },
            },
            data: m2R2Data,
          },
        ],
      };
      this.chartInstance2.setOption(option);
    },
    getCharts3(m2R2Data) {
      // let m2R2Data2 = [
      //   {
      //     value: 335,
      //     name: "样品",
      //     itemStyle: {
      //       color: "#9CC900",
      //     },
      //   },
      //   {
      //     value: 310,
      //     name: "料箱",
      //     itemStyle: {
      //       color: "#06CBFF",
      //     },
      //   },
      //   {
      //     value: 234,
      //     name: "空位",
      //     itemStyle: {
      //       color: "#0688F7",
      //     },
      //   },
      // ];

      let option = {
        title: [
          {
            text: "静 置 区",
            textStyle: {
              fontSize: 9,
              color: "white",
              lineHeight: 10,
            },
            left: "43%",
            top: "43%",
            textAlign: "center",
          },
        ],

        // 🔥 添加图例 legend
        // legend: {
        //   show: true,
        //   data: m2R2Data.map((item) => item.name), // 图例文字
        //   orient: "vertical", // 垂直排列
        //   icon: "circle",
        //   right: "10", // 放在右边
        //   top: "middle", // 垂直居中
        //   itemWidth: 5, // 图例图标宽度
        //   itemHeight: 5, // 图例图标高度
        //   textStyle: {
        //     color: "#ffffff", // 图例文字颜色
        //     fontSize: 8,
        //   },
        //   padding: [20, 5], // 上下左右内边距，让图例更紧凑
        //   align: "left",
        // },

        series: [
          {
            name: "",
            type: "pie",
            center: ["48%", "50%"], // 饼图偏左放置，为图例留空间
            radius: ["50%", "75%"],
            clockwise: false,
            avoidLabelOverlap: false,
            itemStyle: {
              normal: {
                borderColor: "#ffffff",
                borderWidth: 1,
              },
            },
            label: {
              normal: {
                show: false,
                position: "outer",
                formatter: function (params) {
                  return params.data.name;
                },
              },
            },
            data: m2R2Data,
          },
        ],
      };
      this.chartInstance3.setOption(option);
    },
    getStatisticAnalysis() {
      getStatisticAnalysis().then((res) => {
        if (res.success) {
          this.count1 = res.data.stackerZero;
          this.count2 = res.data.stackerThree;
          this.count3 = res.data.stackerSix;
          this.count4 = res.data.stackerNine;
          this.percent1 = Number((this.count1 / 8).toFixed(2) * 100);
          this.percent2 = Number((this.count2 / 8).toFixed(2) * 100);
          this.percent3 = Number((this.count3 / 8).toFixed(2) * 100);
          this.percent4 = Number((this.count4 / 8).toFixed(2) * 100);
        }
      });
    },
    outputTemperature() {
      outputTemperature().then((res) => {
        if (res.success) {
          this.temperature1 = res.data.temperature;
          this.humidity1 = res.data.humidity;
        }
      });
    },
    outputTemperature2() {
      outputTemperature2().then((res) => {
        if (res.success) {
          this.temperature2 = res.data.temperature;
          this.humidity2 = res.data.humidity;
        }
      });
    },
    getInventory() {
      getInventory().then((res) => {
        if (res.success) {
          let high = res.data.LA_SHELF_STORAGE_H;
          let ai = res.data.LA_SHELF_STORAGE;
          let statics = res.data.static;
          let data1 = [
            {
              value: high[0],
              name: "样品",
              itemStyle: {
                color: "#9CC900",
              },
            },
            {
              value: high[1],
              name: "料箱",
              itemStyle: {
                color: "#34D7EA",
              },
            },
            {
              value: high[2],
              name: "空位",
              itemStyle: {
                color: "#093FBF",
              },
            },
          ];
          let data2 = [
            {
              value: ai[0],
              name: "样品",
              itemStyle: {
                color: "#9CC900",
              },
            },
            {
              value: ai[1],
              name: "料箱",
              itemStyle: {
                color: "#34D7EA",
              },
            },
            {
              value: ai[2],
              name: "空位",
              itemStyle: {
                color: "#093FBF",
              },
            },
          ];
          let data3 = [
            {
              value: statics[0],
              name: "样品",
              itemStyle: {
                color: "#9CC900",
              },
            },
            {
              value: statics[1],
              name: "料箱",
              itemStyle: {
                color: "#34D7EA",
              },
            },
            {
              value: statics[2],
              name: "空位",
              itemStyle: {
                color: "#093FBF",
              },
            },
          ];
          this.getCharts1(data1);
          this.getCharts2(data2);
          this.getCharts3(data3);
        }
      });
    },
    format(e, type) {
      if (type == 1) {
        return `${this.count1} / 8`;
      }
      if (type == 2) {
        return `${this.count2} / 8`;
      }
      if (type == 3) {
        return `${this.count3} / 8`;
      }
      if (type == 4) {
        return `${this.count4} / 8`;
      }
    },
  },
  mounted() {
    this.chartInstance = echarts.init(document.getElementById("boxs1"));
    this.chartInstance2 = echarts.init(document.getElementById("boxs2"));
    this.chartInstance3 = echarts.init(document.getElementById("boxs3"));
    this.getStatisticAnalysis();
    this.outputTemperature();
    this.outputTemperature2();
    this.getInventory();
    // this.getCharts1();
    // this.getCharts2();
    // this.getCharts3();
    setInterval(() => {
      this.outputTemperature();
      this.outputTemperature2();
      this.getInventory();
    }, 1000 * 60 * 30);

    setInterval(() => {
      this.getStatisticAnalysis();
    }, 1000 * 60);

    setInterval(() => {
      this.show2 = !this.show2;
      this.show = false;
      setTimeout(() => {
        this.show = true;
      }, 500);
    }, 1000 * 10);
  },
};
</script>


<style lang="scss" scoped>
.mid-b {
  margin-top: 10px;
  width: 100%;
  height: 20vh;
  display: flex;
  align-items: center;
  gap: 10px;
  //   background-color: red;
  .item {
    height: 100%;
    width: 27%;
    display: flex;
    flex-direction: column;
    .item-content {
      flex: 1;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding: 0px 10px 10px 10px;
      // gap: 10px;
      .item-one {
        width: 47%;
        height: 40%;
        // background-color: red;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
  }
  .item2 {
    height: 100%;
    width: calc(44% + 10px);
    display: flex;
    flex-direction: column;
    .item2-content {
      flex: 1;
      display: flex;
      align-items: center;
      // gap: 8px;
      .box1 {
        width: 28%;
        height: 100%;
      }
      .box2 {
        width: 28%;
        height: 100%;
      }
      .box3 {
        //   flex: 1;
        width: 28%;
        // width: 42%;
        height: 100%;
      }
      .box4 {
        color: white;
        font-size: 10px;
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .box4 > div {
        position: relative;
        padding-left: 20px; /* 为圆点留出空间 */
      }

      .box4 > div::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 10px;
        height: 10px;
        border-radius: 50%;
      }
      /* 为每个子 div 设置不同颜色 */
      .box4 > div:nth-child(1)::before {
        background-color: #9cc900; /* 红色 */
      }
      .box4 > div:nth-child(2)::before {
        background-color: #34d7ea; /* 青绿色 */
      }
      .box4 > div:nth-child(3)::before {
        background-color: #093fbf; /* 蓝色 */
      }
    }
  }
  .item3 {
    height: 100%;
    width: 27%;
    display: flex;
    flex-direction: column;
    .item3-content {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      .ball1 {
        width: 38%;
        height: 72%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .ball2 {
        width: 38%;
        height: 72%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}

::v-deep .el-progress-circle {
  width: 50px !important;
  height: 50px !important;
}
::v-deep .el-progress__text {
  font-size: 8px !important;
  color: #01e3b3 !important;
}
</style>
